import React from 'react'
import { useHistory } from 'react-router-dom'
import { useDispatch,useSelector } from 'react-redux'
import { useEffect } from 'react'
import { loadAsyncs } from '../../actionCreater'

import {
  Ui
} from './StyledSelect'

import banner from '@a/images/daka/images/dk__02.jpg'
// import asd from '@a/images/daka/images/dk__05.jpg'
const SelectUi = () => {
  let data = useSelector(state => state.daka.lists)
  console.log(data);
  const dispatch = useDispatch()
  useEffect(()=>{
    let id =JSON.parse(sessionStorage.username) 
    let data = {
      "uid":id.uid
    }
    dispatch(loadAsyncs(data))
  },[dispatch])
  let history = useHistory()
  const handleClick =(index)=>{
    return (()=>{
      history.push(`/dktemplate`,{index})
    })
  }
  return (
    <Ui>
      <div className='img'>
        <img src={`${banner}`} alt=""/>
      </div>
      <div className="list">
        <h1>打卡活动</h1>
        <ul>
          {
            data && data.map((v,index)=>{
              return (
                <li key={v.dkId}>
                <div
                onClick={handleClick(v)}
                ><img src={v.dkPhoto} alt=""/></div>
                <span>{v.dkName}</span>
               </li>
              )

            })
          }
        </ul>
      </div>
    </Ui>
  );
}

export default SelectUi;
{/* <li>
<div
onClick={handleClick}
><img src={`${asd}`} alt=""/></div>
<span>校园分享</span>
</li>
<li>
<div><img src={`${asd}`} alt=""/></div>
<span>校园分享</span>
</li>
<li>
<div><img src={`${asd}`} alt=""/></div>
<span>校园分享</span>
</li>
<li>
<div><img src={`${asd}`} alt=""/></div>
<span>校园分享</span>
</li>
<li>
<div><img src={`${asd}`} alt=""/></div>
<span>校园分享</span>
</li>
<li>
<div><img src={`${asd}`} alt=""/></div>
<span>校园分享</span>
</li>
<li>
<div><img src={`${asd}`} alt=""/></div>
<span>校园分享</span>
</li>
<li>
<div><img src={`${asd}`} alt=""/></div>
<span>校园分享</span>
</li>
<li>
<div><img src={`${asd}`} alt=""/></div>
<span>校园分享</span>
</li> */}